<style>
.order{
    padding-bottom: 100px;
}
.order .top{
    background: url('/static/top.png') no-repeat;
    background-size: cover;
    text-align: center;
    width:100%;
    height: 130px;
    color: #fff;
    display: flex;
    justify-content: center;
    font-size: 12px;
    flex-direction: column;
}

.order .step {
    width:90%;
    margin: auto;
    padding: 15px 0;
    text-align: center;
    color: #999;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
}
.order .step p{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border:1px solid #999;
    box-sizing: border-box;
    position: relative;
    box-sizing: border-box;
}
.order .step p:nth-child(2),.order .step p:nth-child(3){
    line-height: 18px;
    padding-top: 6px;
}
.order .step p::after{
    content: "";
    width:80%;
    display: block;
    position: absolute;
    right: -85%;
    top: 50%;
    height: 1px;
    background: #999;
}
.order .step p.active{
    color: #24A1F5;
    border-color: #24A1F5;
}
.order .step p.active::after{
    background: #24A1F5;
}
.order .step p:last-child::after{
    content: none;
}
.order .tabs{
    margin: 20px auto 0;
}
.order .van-tabs__nav--card .van-tab.van-tab--active{
    background-color: #ccc !important;
}
.order .van-tabs__nav--card .van-tab{
    color:#999999 !important;
    border-right:1px solid #ccc;
}
.order .van-tabs__nav--card .van-tab:last-child{
    border-right: 0;
}
.order .van-tab.van-tab--active{
    color: #fff !important;
}
.order .van-tabs__nav--card{
    border:1px solid  #ccc !important;
}
.order .text_list {
    margin: 20px auto 0 ;
}
.order .text_list li{
    padding: 14px 0;
    display: flex;
    width:92%;
    margin: auto;
    justify-content:space-between;
    color: #999;
    border-bottom: 1px solid #eee;
}
.order .text_list h4{
    width:40%;
    color: #333;
}

.order .cost{
    width: 92%;
    margin: auto;
    border-bottom: 1px solid #eee;
}
.order .cost h5,.order .cost .service{
    margin: auto;
    padding: 14px 0;
}
.order .cost .service{
    position: relative;
    width:93%;
}
.order .cost .service::before{
    content: "";
    top: 0;
    position:absolute;
    width:110%;
    height: 1px;
    left: -5%;
    background: #eee;
}
.order .cost span{
    float: right;
    margin-right: 15px;
}
.order .cost b{
    font-weight: normal;
}
.order .van-collapse::after{
    content: none;
}
.order .van-cell{
    padding: 12px 0;
}
.order .van-collapse-item__content{
    padding: 0;
    width:92%;
    margin: auto;
}
.order .cost .title{
    text-indent: 4%;
    margin: auto;
    padding: 10px 0 0 0;
}
.order .cost h4{
    width:96%;
    padding: 10px 0 4px;
}
.order .cost .van-collapse-item__title{
    padding: 8px 0;
}
.order .cost .van-collapse-item__title::after{
    content: none;
}
.order .cost .van-cell__right-icon{
    padding-top: 11px;
}
.order .color_baohu{
    border-bottom: 1px solid #eee;
    position: relative;
}
.order .color_baohu::before{
    content: "";
    width:92%;
    height: 1px;
    background: #eee;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
}
.order .tishi{
    margin: 10px 0;
    padding: 9px 0;
    background: #FFAE19;
    color: #fff;
    text-indent: 3%;
}
.btn_bg{
    background: #fff;
    position:fixed;
    padding:10px 0;
    bottom: 0;
    width:100%;
    border-top: 1px solid #eee;
}
.btn_bg button{
    background: #24A1F5;
    color: #fff;
    border-radius: 5px;
    border:0;
    margin: auto;
    width:88%;
    display: block;
}
.order h6{
    font-size: 14px;
    padding: 10px 16px;
}
.order .pics{
    text-align: center;
}
.order .pics .pic{
    width:20%;
    float: left;
    margin:0 0 15px 4%;
}
.order .pics p{
    margin-top: 5px;
}
.order .pics img{
    box-sizing: border-box;
    border:1px solid #aaa;
}
.order .dan_pro{
    margin-top: 10px;
    border-top:1px solid #eee;
}

.order .man .list_man li{
    width:92%;
    margin: auto;
    display: flex;
    border-top: 1px solid #eee;
    padding: 10px 0;
}
.order .man .list_man li i{
    float: left;
    width:20px;
    height: 20px;
    background: #24A1F5;
    text-align: center;
    line-height: 22px;
    color: #fff;
    border-radius: 50%;
    margin: 13px 20px 0 0 ;
    font-style: normal;
}

.order .man .list_man li p{
    color: #999;
    margin-top: 5px;
}
.order .cost>h4{
    position: relative;
}
.order .cost>h4::after{
    content: "";
    width:105%;
    display: block;
    position: absolute;
    bottom: -0;
    left: 0;
    height: 1px;
    background: #eee;
}
</style>
<template>
    <div class="order">
        <div class="top">
            <h4 style="margin-bottom:10px;font-size:16px">{{order.name}}</h4>
            <p><span>{{order.apply_no?'申请号:':'案件编号：'}}</span>{{ order.apply_no || order.no}}</p>
        </div>
        <div class="step" v-show="pay" ref="step">
            <p>审核中</p>
            <p>提交<br>国知局</p>
            <p>等待<br>授权</p>
            <p >已授权</p>
        </div>
        <hr v-if="pay">
        <div class="tishi" v-else>
            <router-link :to="{name:'pay',query:{case_id:this.$route.query.case_id}}">该项专利申请还未完成付款，点击去付款  >>></router-link>
        </div>
        <div class="cost wait_pay" v-if="!pay">
           <h4 style="color:red">待支付费用 <span>￥<b>{{money}}</b></span></h4>
             <van-collapse  v-model="cost_active">
                <van-collapse-item>
                    <div slot="title" class="title">代缴行政收费（<i>未</i>费减）  <span>￥<b>{{gov_count}}</b></span></div>
                    <h5 v-for="v in fee_list" > {{v.name}} <span>￥<b>{{v.total}}</b></span> </h5>
                </van-collapse-item>
            </van-collapse>
            <div class="service">
                服务费<span>￥<b>{{service_fee}}</b></span>
            </div>
        </div> 
        <van-tabs v-model="tabs" class="tabs" type="card">
            <van-tab>
                <div slot="title" >基本资料</div>
                <ul class="text_list">
                    <li>
                        <h4>产品用途</h4>
                        <p>{{order.desp}}</p>
                    </li>
                    <li>
                        <h4>设计要点</h4>
                        <p>{{key_points}}</p>
                    </li>
                    <li>
                        <h4>其他情况说明</h4>
                        <p>{{order.other}}</p>
                    </li>
                    <li>
                        
                        <h4>查看代理委托书</h4>
                        <a :href="host+order.agreement_file_path">
                        <van-icon name="arrow" />
                        </a>
                    </li>
                </ul>
                <div class="cost wait_pay" v-if="pay">
                <h4>已支付费用 <span style="margin-right:0">￥<b>{{money}}</b></span></h4>
                    <van-collapse  v-model="cost_active">
                        <van-collapse-item>
                            <div slot="title" class="title">代缴行政收费（<i>未</i>费减）  <span>￥<b>{{gov_count}}</b></span></div>
                            <h5 v-for="v in fee_list" v-if="v.fee_type!='服务费'" > {{v.name}} <span>￥<b>{{v.total}}</b></span> </h5>
                        </van-collapse-item>
                    </van-collapse>
                    <div class="service">
                        服务费<span>￥<b>{{service_fee}}</b></span>
                    </div>
                </div> 
            </van-tab>
            <van-tab>
                <div slot="title" >照片资料</div>
                    <div class="dan_pro" v-for="(vv,ii) in pic_list" :key="ii"> 
                        <h6>{{order.design.type=='单一'?'产品图片':!ii?'整体图片':'套装系列'+ii}}</h6>
                        <div class="pics">
                            <div class="pic" v-for="(v,i) in vv" :key="i">
                                <a :href="host+v.path"><img :src="host+v.path"></a>
                                <p>{{v.key}}</p>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <h6 class="color_baohu">色彩保护 <van-switch :value="is_color_protection" size="20px" disabled style="font-size: 20px; float: right;" /></h6>
            </van-tab>
            <van-tab>
                <div slot="title" >人员资料</div>
                <div class="man">
                    <h6>产品申请人</h6>
                    <ul class="list_man">
                        <li v-for="(v,i) in order.applicant" :key="i">
                            <i>{{i+1}}</i>
                            <div class="center">
                                <h4>{{v.name}}</h4>
                                <p>{{v.no}}</p>
                            </div>
                        </li>
                    </ul>
                    <hr>
                    <h6>产品设计人</h6>
                    <ul class="list_man">
                        <li v-for="(v,i) in order.designer" :key="i">
                            <i>{{i+1}}</i>
                            <div class="center">
                                <h4>{{v.name}}</h4>
                                <p>{{v.no}}</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </van-tab>
        </van-tabs>
        <div class="btn_bg" v-if="!pay">
            <button><router-link :to="{name:'pay',query:{case_id:this.$route.query.case_id}}" style="width:100%;display:block">立即付款</router-link></button>
        </div>
    </div>
</template>
<script>
import {design_case_detail} from '@/assets/api'
import { Tab, Tabs,Collapse, CollapseItem,Switch  } from 'vant';
export default {
    data(){
        return {
            key_points:'',
            pay:false,
            tabs:0,
            cost_active: [0],
            order:{},
            is_color_protection:false,
            service_fee:0,
            gov_count:0,
            money:0,
            fee_list:[],
            pic_list:[]
        }
    },
    components:{
        'van-tabs':Tabs,
        'van-tab':Tab,
        "van-collapse":Collapse,
        "van-collapse-item":CollapseItem,
        "van-switch":Switch,
    },
    beforeRouteEnter (to, from, next) {
        next(vm=>{
            vm.tabs=from.name?0:1
        })
        
    },
    mounted(){
        document.title='专利详情'
        if(!this.$route.query.case_id) {
            this.$router.push('home')
            return
        }
        design_case_detail({case_id:this.$route.query.case_id}).then(res=>{
            if(res){
                this.order=res.data.data.info
                this.key_points=res.data.data.info.design.key_points
                this.is_color_protection=this.order.design.is_color_protection?true:false
                if(this.$route.params.is_pay){
                    this.pay=true 
                    this.$refs.step.getElementsByTagName('p')[0].setAttribute('class','active') 
                }else{
                    let status=+res.data.data.info.status,step=0
                    this.pay=status!=1001
                    if(status!=1001){
                        if(status==1002) step=0
                        else if(status<3003) step=1
                        else if(status<6001) step=2
                        else if(status==6001||status==6002) step=3
                        this.$refs.step.getElementsByTagName('p')[step].setAttribute('class','active') 
                    }
                }
               


                this.money=res.data.data.info.create_order.money
                this.fee_list=res.data.data.info.create_order.details
                for (const el of res.data.data.info.create_order.details) {
                    if(el.fee_type=='服务费')
                        this.service_fee=el.total
                    else
                        this.gov_count+=el.total
                }

                this.pic_list.push( res.data.data.info['整体_展开'],...res.data.data.info['套装_展开'])
                
            }
        })
    }

}
</script>

